<template>
  <Sidebar />

  <div class="main-containers">
    <div class="main-item-title">
      <div class="main-item-title-left">智慧学习考核库</div>
      <div class="main-item-title-right">
        涵盖建设领域多专业知识，为学习者、从业者提供广泛、权威、便捷、有趣的学习与考核空间
      </div>
      <el-button type="primary" @click="startAssess">
        <img src="@/assets/home/bi.png" alt="" class="main-item-title-right-img">
        开始考核
      </el-button>
    </div>
    <div class="main-item">
      <div class="main-item-content">
        <div class="flex gun-item">
          <div class="gun"></div>
          <div class="gun-text flex1">
            {{ getTabText(modelValue) }}
          </div>
          <div v-if="modelValue == '5'" class="flex main-switch">
            <div>简历{{ isResumePublic ? "公开" : "不公开" }}</div>
            <el-switch v-model="isResumePublic" active-color="#13ce66" inactive-color="#ff4949" style="margin: 0 20px;"
              @change="handleResumePublicChange"></el-switch>
            <el-button type="primary" plain @click="handlePreviewClick">预览</el-button>
          </div>
        </div>
        <component :is="currentComponent" :previewData="previewData"
          :isResumePublic="shouldPassIsResumePublic ? isResumePublic : undefined" @close-preview="handlePreviewClose" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMenuStore } from '@/stores/menu';
import { userApi } from '@/api/modules/user.js'
import Sidebar from '@/components/layout/Sidebar.vue';
import Assessment from '@/components/home/Assessment.vue';
import Echarts from '@/components/home/echarts.vue';
import Honor from '@/components/home/honor.vue';
import Information from '@/components/home/information.vue';
import CurriculumVitae from '@/components/home/curriculum-vitae.vue';
import postList from '@/components/home/postList.vue'
const route = useRoute();
const router = useRouter();
const menuStore = useMenuStore();
const isResumePublic = ref(true);
const shouldPassIsResumePublic = ref(false); // 控制是否传递 isResumePublic
const previewData = ref(null);
const modelValue = ref(route.params.tab || '1');
watch(() => route.params.tab, (newTab) => {
  modelValue.value = newTab || '1';
});
const fetchData = async () => {
  try {
    const data = await userApi.getStudentResume();
    isResumePublic.value = data.is_open
  } catch (err) {
    console.log('Failed to fetch data:', err);
  }
};
onMounted(() => {
  fetchData();
});
// 处理简历公开状态变化的事件
const handleResumePublicChange = (newValue) => {
  // 更新状态并通知子组件
  isResumePublic.value = newValue;
  shouldPassIsResumePublic.value = true;
};
const currentComponent = computed(() => {
  const components = {
    '1': Assessment,
    '2': Echarts,
    '3': Honor,
    '4': Information,
    '5': CurriculumVitae,
    '6': postList
  };
  return components[modelValue.value] || Assessment;
});
const getTabText = (tab) => {
  const texts = {
    '1': '我的考核',
    '2': '我的成长',
    '3': '我的证书',
    '4': '我的信息',
    '5': '我的简历',
    '6': '岗位查询'
  };
  return texts[tab] || '我的考核';
};
const handlePreviewClick = () => {
  previewData.value = true
};
// 处理关闭预览事件
const handlePreviewClose = () => {
  previewData.value = false;
};
const startAssess = () => {
  router.push('/examCourses/post');
};
</script>

<style lang="scss" scoped>
:deep(.el-menu--horizontal.el-menu) {
  border: none !important;
}

:deep(.el-menu-item) {
  padding: 0;
  margin-top: 15px;
  margin-right: 30px;
  height: 40px;
}

.main-containers {
  margin-left: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .main-item-title-right-img {
    margin-right: 8px;
  }

  .main-item-title {
    box-sizing: border-box;
    padding: 24px 40px;
    height: 164px;
    background-image: url('@/assets/home/bg.png');
    background-size: 100% 100%;
    border-radius: 6px;
      margin-bottom: 24px;

    .main-item-title-right {
      margin-bottom: 24px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
    }

    .main-item-title-left {
      font-weight: 600;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.88);
      line-height: 38px;
    }
  }

  .main-item {
    font-family: MiSans, MiSans;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    flex: 1;
    height: calc(100% - 185px);

    .main-item-content {
      //height: 756px;
      //overflow: auto;
      background: #FFFFFF;
      border-radius: 6px;
      box-sizing: border-box;
      padding: 24px;
      height: 100%;

      .gun-item {
        font-weight: 500;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.88);

        .gun {
          width: 4px;
          height: 20px;
          background: #33A0FF;
          border-radius: 1px;
          margin-right: 12px;
        }

        .main-switch {
          font-weight: 400;
          font-size: 16px;
          color: rgba(0, 0, 0, 0.88);
          line-height: 28px;

          :deep(.el-switch) {
            margin: 0 20px;
          }
        }
      }
    }
  }
}
</style>